<template>
    <div id="app" class="container mt-5">
      <div class="card text-center" style="width: 18rem;">
        <div class="card-body">
          <h3 class="card-title">黑马自动售货机</h3>
          <button class="btn btn-success buy-button" @click="addToCart('可乐', 5)">可乐5元</button>
          <button class="btn btn-warning buy-button" @click="addToCart('咖啡', 10)">咖啡10元</button>
          <button class="btn btn-info buy-button" @click="addToCart('牛奶', 8)">牛奶8元</button>
          <button class="btn btn-primary buy-button" @click="showRechargeDialog">充值</button>
          <button class="btn btn-danger buy-button" @click="showCheckoutDialog">结算</button>
          <p class="card-text mt-3">银行卡余额：{{ money }}元</p>
        </div>
      </div>
  
      <!-- 充值对话框 -->
      <div v-if="isRechargeDialogVisible" class="modal">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">充值金额</h5>
            <span class="close" @click="hideRechargeDialog">&times;</span>
          </div>
          <div class="modal-body">
            <input type="number" class="form-control" v-model.number="rechargeAmount" />
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="hideRechargeDialog">取消</button>
            <button type="button" class="btn btn-primary" @click="recharge">充值</button>
          </div>
        </div>
      </div>
  
      <!-- 结算对话框 -->
      <div v-if="isCheckoutVisible" class="modal">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">购物清单</h5>
            <span class="close" @click="hideCheckoutDialog">&times;</span>
          </div>
          <div class="modal-body">
            <ul class="list-group">
              <li class="list-group-item" v-for="(item, index) in cart" :key="index">
                {{ item.name }} - {{ item.price }}元
              </li>
            </ul>
            <p class="mt-3">总计：{{ total }}元</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="hideCheckoutDialog">取消</button>
            <button type="button" class="btn btn-primary" @click="confirmPurchase">确认购买</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  
  const money = ref<number>(100)
  const rechargeAmount = ref<number>(0)
  const isRechargeDialogVisible = ref<boolean>(false)
  const isCheckoutVisible = ref<boolean>(false)
  const cart = ref<Array<{ name: string; price: number }>>([])
  
  const total = computed(() => cart.value.reduce((acc, item) => acc + item.price, 0))
  
  const addToCart = (name: string, price: number) => {
    cart.value.push({ name, price });
  }
  
  const confirmPurchase = () => {
    if (total.value <= money.value) {
      money.value -= total.value
      cart.value = [] // 清空购物车
      hideCheckoutDialog() // 关闭结算对话框
    } else {
      alert('余额不足，请充值！')
    }
  }
  
  const showRechargeDialog = () => {
    isRechargeDialogVisible.value = true
  }
  
  const hideRechargeDialog = () => {
    isRechargeDialogVisible.value = false
  }
  
  const recharge = () => {
    money.value += rechargeAmount.value
    rechargeAmount.value = 0
    hideRechargeDialog()
  }
  
  const showCheckoutDialog = () => {
    isCheckoutVisible.value = true
  }
  
  const hideCheckoutDialog = () => {
    isCheckoutVisible.value = false
  }
  </script>
  
  <style>
  /* 添加一些基本样式 */
  .modal {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }
    /* 添加一些基本样式 */
    modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }

  .modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }

  .modal-body {
    padding: 2px 16px;
  }

  .modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .buy-button {
    margin-right: 10px;
  }
</style>
